<template>
  <div class="cart">
    <van-swipe-cell
      v-for="item in cart"
      :key="item.id"
    >
      <van-card
        :price="item.price | money"
        :desc="item.desc"
        :title="item.title"
        class="goods-card"
        :thumb="item.img"
      >
        <template #thumb>
          <!-- <van-checkbox :value="prod.checked" @click="toggleCartItemHandler(prod.id)"></van-checkbox> -->
          <van-checkbox :value="item.checked" @click="toggleCartItem(item.id)"></van-checkbox>
          <div data-v-7698a586="" class="van-image" style="width: 88px; height: 88px;">
            <img :src="item.img" class="van-image__img" style="object-fit: cover;">
          </div>
        </template>
        <template #num>
          <!-- <van-stepper theme="round" button-size="22" /> -->
          <van-stepper :value="item.amount"  step="1" @change="(value)=>{changeAmountHandler(item.id,value) }"/>
        </template>
      </van-card>
      <template #right>
        <van-button square text="删除"  type="danger" class="delete-button" @click="removeCartItem(item.id) "/>
      </template>
    </van-swipe-cell>

    <van-submit-bar :price="totalMoney" button-text="提交订单">
      <van-checkbox :value="checkedAll" @click="AllChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>

</template>

<script>
// 引入VUEX 中辅助方法
import { mapMutations, mapGetters, mapState } from 'vuex'

export default {
  name: 'Cart',
  computed: {
    // 将 getters 中指定的计算映射到当前组件 的计算属性
    ...mapGetters(['checkedAll', 'totalMoney']),
    ...mapState({
      cart: state => state.cart.cart
    })
    // 将vuex的state中的数据和getter 计算出的数据映射到组建computed 计算属性中
    // cart () {
    //   return this.$store.state.cart.cart
    // },
    // checkedAll () {
    //   console.log(this.$store.getters.checkedAll)
    //   return this.$store.getters.checkedAll
    // }
  },
  methods: {
    // 将 moutatios 中指定的 moutations handler 映射到当前组件的方法中
    // 可以省略 this.$store.commit('xxx') 写法
    ...mapMutations(['changeCartTtemAmount', 'removeCartItem', 'toggleCartItem', 'toggleAllCheched']),
    // 点击加减改变数量
    changeAmountHandler (id, value) {
      console.log(this.changeCartTtemAmount)
      this.changeCartTtemAmount({
        id,
        amount: value
      })
    },
    // 删除
    // deleteItemHandler (id) {
    //   this.$store.commit('removeCartItem', id)
    // },
    // 切换选中
    // toggleCkeckedHandler (id) {
    //   this.$store.commit('toggleCartItem', id)
    // }
    AllChecked () {
      console.log(!this.checkedAll)
      this.toggleAllCheched(!this.checkedAll)
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods-card {
    margin: 0;
  }
  .delete-button {
    height: 100%;
  }
  .van-card__thumb {
    width: 110px;
    height: 88px;
    display: flex;
    .van-checkbox {
      margin:5px;
    }
  }
</style>
